<template>  
  <div class="product-list">  
    <h1>农产品信息列表</h1>  
    <ul>  
      <li v-for="product in products" :key="product.id" class="product-item">  
        <h2>{{ product.name }}</h2>  
        <p>{{ product.description }}</p>  
        <p>价格: {{ product.price }} 元/斤</p>  
        <button @click="viewDetails(product)">查看详情</button>  
      </li>  
    </ul>  
    <div v-if="selectedProduct" class="product-details">  
      <h2>产品详情</h2>  
      <p><strong>名称:</strong> {{ selectedProduct.name }}</p>  
      <p><strong>描述:</strong> {{ selectedProduct.description }}</p>  
      <p><strong>价格:</strong> {{ selectedProduct.price }} 元/斤</p>  
      <button @click="closeDetails">关闭详情</button>  
    </div>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  name: 'ProductList',  
  setup() {  
    const products = ref([  
      { id: 1, name: '苹果', description: '新鲜的苹果，口感脆甜', price: 5 },  
      { id: 2, name: '香蕉', description: '软糯香甜的香蕉', price: 3 },  
      // ...更多农产品信息  
    ]);  
  
    const selectedProduct = ref(null);  
  
    const viewDetails = (product) => {  
      selectedProduct.value = product;  
    };  
  
    const closeDetails = () => {  
      selectedProduct.value = null;  
    };  
  
    return {  
      products,  
      selectedProduct,  
      viewDetails,  
      closeDetails,  
    };  
  },  
};  
</script>  
  
<style scoped>  
.product-list {  
  width: 80%;  
  margin: 0 auto;  
}  
  
.product-item {  
  border: 1px solid #ccc;  
  padding: 10px;  
  margin-bottom: 10px;  
}  
  
.product-details {  
  margin-top: 20px;  
  border: 1px solid #ccc;  
  padding: 10px;  
}  
</style>